Responsive image

A Student Management System

ECE5725 Final Project 2021/12/13

by Jinyang Dai(jd2249) and Bin Xu(bx83)





The Demo Video

Main Objectives


The purpose of the project is to make easier way of teaching. It embeds most important functions that is required in school teaching normals into a web, a server and a Raspberry Pi. These functions includes:

  • Take attendence
  • Make surveys
  • Show timetables
  • Publish announcements





    Introduction


Using different tools to accomplish different goals in daily life usually causes a lot of trouble. In universities the problem could be obvious. Take Cornell University as an example:

  • Write their names on paper for checking attendence;
  • Open Class Roster to check timetables;
  • Open Canvas to check teacher's announcements or surveys;

To solve the problem, this project embeds all the mentioned functions into ONE SYSTEM. It mainly includes:

For teacher use, including account operations (login/ logout/ signup). Teachers can publish announce- ments, conducting Y/N surveys, view the responses of surveys, view the latest attendance conditions (numbers and absent namelist), view the historical attendance conditions.

Operating on a Raspberry Pi. It employs Django framework for developement. It also includes the database.

Operating on a Raspberry Pi. It is a portable and easy-using GUI system written in pygame. It can view the timetables, view the teacher's announcements, response teacher's surveys, as well as taking attendence. A teacher's RPi is used to take attendance for the students.





    Design and Testing


The overall design is shown in the figure below: The core is the server and the database which is managed with Django. All the three end systems go through Django to communicate, including posting and responsing.

Responsive image


  • The attendance: Teacher's Raspberry Pi contains a UI, which could read the nearby signals from the students' Raspberry Pis. The teacher's Pi will then send the obtained addresses to the server through transmission functions. The database records the attendance each time. Then when the teacher requires the data of attendance, the database sends all the data to teacher's web and the front end on the website will filter the data and make visualizations.
  • The announcements: The teacher's website has a page to send an announcement. It includes a title and a description. It is then stored in the database. All the students could read the announcement on his Raspberry Pi.
  • The timetables: The timetables are stored in the database from the beginning. The students could read his scheduling on his Raspberry Pi by requesting the data.
  • The surveys: The teacher could send surveys from their website. It includes a description and an uncertain amount of questionnaires with the default "Yes/No" answers. The teacher can send the survey and store it in the database. The student's Raspberry Pi could make quick scans and go through the questions by clicking "Yes/No" on the PiTFT screen.

Two RPi are used in the design. The server and the teacher's UI runs on one Raspberry Pi, while the student UI operates on another Raspberry Pi. A laptop is also used to present the website for the teacher. The Raspberry Pi UI is designed with Pygame while the website is designed with HTML, JS, CSS and D3. The server structure is developed based on Django. The database of the server is SQLite3. To transmit information, we use TCP protocol.

Tools been used in the project:

Pygame; Django; Ajax; SQL; Raspberry Pi & PiTFT; TCP; Nginx; HTML; Apache; JS; D3; CSS





    The Website


Please press > to scan the screenshots/comments for the website! (8 pages)


Technical design:

The front end is build with HTML, JS and CSS. All the design details and function introduction could be found on the above carousel. Two Nav-bars are added for webpage changing. The two special tools used for it is Ajax and D3. Ajax is used to post information to the backend system, which requires a url, a message, and a method for posting [2]. Since all the post messages are in the format of JSON, a JSON package is used combined with Ajax. D3 is a visualization package for web design. It can convert data into a different format of visualization. An animated bar chart and a static line chart are used for better-presenting attendance data.

Several Difficulties and the Solves:

  • Ajax post method: The Ajax post method is very different among the web. For testing, a local light-weight server Node Express is built for Ajax testing when the back-end system is not finished.
  • Ajax receiving message: The initial receiving message is always the returning HTML file of the page at first time. Then the problem is solved by receiving messages with JSON style.
  • CSS not beauty:The websites' CSS is purely hand-typed which is very difficult to make functional, beautiful websites. The problem is not solved however the report page uses Bootstrap for better appearance.
  • HTML functional problems: The webpage like Index performs two total different layouts, which the html file is difficult to write combined with Javascript. As well as the layout of the survey page, add unlimited questions and make the whole system work.

All the testing procedures are conducted by connecting with the back-end system. All the post data can be logged into the SQLite database and all the required data can be shown on the webpages.


Teacher RPi UI Design

  • Function: The teacher UI is on the RPi written in Python, which only contains one function, which is to read the Bluetooth signals surrounding. It has two buttons: "Read the Bluetooth" and "Send the information". By clicking the "Read" button, it will take three seconds to acquire Bluetooth signals. A reminder will appear if reading is successful. Then the teacher shall send the information of attendance by clicking the "send" button.
  • Bluez: Bluez is a package for RPi to read Bluetooth signals [4]. It can read the signals of Bluetooth in a certain amount of range. Several Bluetooth addresses are pre-recorded and written in Python for searching. Five addresses are recorded for testing, including the Student's RPi, two cellphones, and two laptops. The transmission is proved to be stable while turning on and off the Bluetooth of the devices.
  • Data transmission: The collected data is processed in the RPi and only transmits the "Attend Users IDs" to the backend.




    Server Backend Design



1. Overview

The kernel of RaspberryPi runs the Linux operating system, which is the largest open source operating system and can fully support the operation of servers and programming scripts. In this project, we choose python and the corresponding Django framework because it is open source and stable [5]. In terms of databases, SQLite3 and SQLite3 are embedded databases in Django. When receiving a request from the client, Django will extract the corresponding data from the database or store the submitted data, and feed the corresponding information back to the front end or client of the student management system.

2. Django Installing

Pyhton is installed in RPi in advanced, so we just need to install Django. Before installing it. We can set up virtualenv at first, virtualenv creates a virtual environment separated from the system environment so that any operation here will not affect the RPi.
To install Django systemwide, use this command:
pip3 install Django
This command will start a new project:
django-admin startproject Management_system
When we run here for the first time, the system prompts "command not found: django-admin". The reason for the error is that django-admin did not join the system path. This can be done by symbolically linking the django-admin in the python.path/site-packages/django/bin/ folder to the /usr/local/bin file [6]. Or use the absolute path to run the command to create the project.
After completing the above operations, we have created a Django project. A folder with the same name will appear under this directory, which contains the server configuration file settng.py, and the routing configuration file urls.py. Then, we can create an application that actually runs the server:
python3 manage.py startapp mysystem
This will create another folder dedicated to storing project-related configuration files. For example, models.py defines the structure of the database [7]. Here, you can customize the tables and their attributes that you need to use. In this project, we created a total of six tables to store the corresponding data. Whenever a new table is created or form properties are updated, we need to connect the database to the backend. After connection, the changed content will be combined in the back-end processing model. The connection code is as follows:
python3 manage.py makemigrations
python3 manage.py migrate


Responsive image
3. Handle Requests

In the Django framework, different functions defined in the View.py script will process all requests according to different request destination addresses. When the web front end or RPi client sends a request, the requested data is packaged into a json file, encoded in utf-8. This file will send data to the corresponding url through the POST method, and call the corresponding function in view.py. We encountered two problems when processing POST requests. The first one is that Django always displays the error: Forbidden (403) at the beginning. The cause of the problem is the lack of CSRF token. But this application does not actually need a token, so this error can be avoided by simply placing a @csrf_exempt before the function that processes the request. The second problem is that sending json data must be passed in the form of a dictionary, otherwise an error will be reported


4. Networking

The server can be launched using this command:
python3 manage.py runserver &
This will allow the server to run in the background so that it can make room for the teacher user interface in the foreground.
We choose TCP for the communication between the two processes to achieve real-time updates of the database and avoid process conflicts.
Then we use:
python3 manage.py runserver 0.0.0.0:8000
This command will become the accessible address of the server on port 8000 of each ip address of the host, so that the server can be accessed by the external network. At the same time, we modify the corresponding settings in setting.py.





    User interface


In this project, we chose a Raspberry Pi with a 320x240 piTFT touch screen as the user terminal. In order to achieve visualization and graphical user interface, the Python library PyGame is used. For better code maintenance and debugging, we use object-oriented programming to create classes for different functions.

...

Index Page

...

Content Page

...

Information Page


First of all, a home interface appears after the Raspberry Pi starts. Figure.x demonstrates the view of the home page. The home page will show the current time, date and user's login name. After clicking the open button in the lower right corner of the homepage, you will enter the function list. The list contains three functions: viewing class schedules, viewing notifications, and completing real-time surveys. These functions are realized by the requests library of python [8]. In addition, bring the student’s Raspberry Pi close to the teacher’s terminal to automatically complete the Bluetooth sign-in function. At the same time, we set the physical button 27 on piTFT as a forced exit function.


In the end, we put these two lines in the .bashrc file so that the service runs automatically when the system is booted:
python3 manage.py runserver 0.0.0.0:8000 &
python3 frontend.py





    Results



Function1: Take attendance

The function works well, from bluetooth-reading, data transmission, and visualization.


Function2: Make surveys

The students RPi UI can show the content of the survey and choose their answers, while the teacher can view the response. However, the Pi could not handle lots of questions due to Pygame design.


Function3: Show timetables

The Raspberry Pi only show the timetables once at a time.


Function4: Publish announce- ments

The function works well, from input, data transmission, and reading at Pi.


All the functions works as planned. However, there still need some improvement, either on RPi display; database complexity and website beauty.





    Conclusions



In this project, the team created a system that embedded the four functions (timetable reading, survey conducting, attendance taking, announcement making) together. Three User Interfaces are created, including one website for teacher's management, one pygame interface on Raspberry Pi for the teacher to collect Bluetooth signals, and one interface on Raspberry Pi for students to manage their courses. All the functions use Django and SQL to manage. The teacher's end is easy to use and has visualization inside; the student's end is portable and easily carried.




    Future Work



The future of the project could be further enhanced. The UIs could be made better: The Raspberry Pi could handle more information by selecting from different pages and which request to view. The teacher's web could make more details, like on what day which course what happens. The visualization could be made better. For all the UIs, their appearance could be improved. Such as employing bootstrap into the web design instead of hand-typed CSS. These also request a more complex database and back-end control. What's more, for better portable usage, the RPi functions could be installed as a mobile phone app.


/


    Appendix


List of Parts

# Parts Number Price
1 Raspberry Pi 2 N/A
2 Pi TFT 2 N/A
3 SD Card 16G 2 N/A




Codes

Please visit our Github for the source code.
Github Respository